<template>
	<u-navbar :leftIconSize="42"  titleStyle="font-size:20px;font-weight:600" :autoBack="false"
	:placeholder='true' title="学员报名" @leftClick="goBack">
	</u-navbar>
	<view class="padding-30rpx">
		<view class=" bg-default" style="border-radius: 4px;font-size: 15px;">
			<view class="flex-al-center padding-30rpx bg-white" style="padding-bottom: 10px;">
				<text class="font-normal font-b">添加学员</text>
				<text class="font-mini color-gray" style="margin-left: 5px;">已添加{{data.studentList.length}}名学员</text>
			</view>
			<view style="padding: 0 15px;">
				<u-line color="#00000025" ></u-line>
			</view>
			<!-- 企业 -->
			<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y bg-default">
				<view class="bg-white" style="padding: 0 15px;">
					<view class="flex-jc-s-b bg-white" v-for="(item,index) in data.studentList" style="border-bottom:1px solid rgba(0,0,0,0.1);padding: 15px 0;">
						<view class="flex-al-center">
							<u-icon name="minus-circle" color="#23B2FF" size="38" @click="removeStudent(index)"></u-icon>
							<view class="flex-column color-black font-normal-x"
								style="align-items: flex-start;margin-left: 12px;">
								<view style="">
									<text class="font-normal-x font-b" style="margin-right: 5px;">{{item.name}}</text>
									<text class="font-small-x font-b">{{item.idCard}}</text>
								</view>
								<text class="font-small" style="padding-top: 3px;">{{item.courseName}}</text>
							</view>
						</view>
						<view>
							<text class="color-orange font-b font-small-x">¥</text>
							<text class="color-orange font-b font-l">{{item.coursePrice}}</text>
							<text style="margin-left: ;">/{{item.courseDay}}天</text>
						</view>
					</view>
					<view class="bg-white padding-30rpx" style="padding-top: 15px;" @click="goAddStudent">
						<view class="flex-center">
							<u-icon name="plus-circle" color="#409EFF" size="30"></u-icon>
							<text class="font-normal-x color-blue2" style="margin-left: 4px;">添加更多学员</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
	<view class="bottom-bar white-bg">
		<view style="display: flex;justify-content: flex-end;margin: 15px 15px 0 15px;align-items: flex-end;">
			<view class="" style="font-size: 13px;margin-top: 5px;margin-right: 15px;">
				<text class="font-small color-black-gray">共{{data.studentList.length}}名学员</text>
				<text class="font-small" style="margin-left:7px;margin-right: 3px;">合计:</text>
				<text class="color-orange font-small-x">¥</text>
				<text class="color-orange font-b font-xxx">{{calcTotalPrice()}}</text>
			</view>
			<u-button :customStyle="{'width':'100px',margin:'0'}" type="primary" shape="circle" text="提交订单" @click="ajaxSubmitOrder"></u-button>
		</view>
	</view>

	<u-popup @close="showMessage = false" :customStyle="{'border-radius': '8px'}" :show="showMessage" mode='center' :safeAreaInsetBottom="false">
		<view class="common-popup text-center">
			<view class="popup-tip">提示</view>
			<view class="popup-content">{{data.tipMessage}}</view>
			<u-button :customStyle="{'width':'132px', 'height':'40px','fontSzie': '16px'}"
			type="primary" shape="circle" text="确认" @click="showMessage = false"></u-button>
		</view>
	</u-popup>
</template>

<script setup>
	import { reactive, ref } from "vue"

	import {onShow, onLoad} from "@dcloudio/uni-app"
	import pageRoute from '@/utils/pageRoute'
	import { submitOrder } from "../const";

	const data = reactive({
		studentList: [],
		tipMessage: ''
	})

	const showMessage = ref(false)

	function calcTotalPrice() {
		let list = data.studentList
		let totalPrice = 0;
		list.forEach((item) => {
			totalPrice += item.coursePrice
		});

		return totalPrice
	}

	function goBack() {
		uni.navigateBack({
			delta: 1
		})
	}

	function goAddStudent() {
		pageRoute.route('pages/order/buy/add-one-student')
	}

	onLoad((res) => {
		uni.$on('addStudentList',addStudentHandle)

		let info = uni.getSystemInfoSync()
		console.log(info.platform)
	})

	function addStudentHandle(addList) {
		if (!addList) {
			return
		}
		if (!addList || addList.length == 0) {
			return
		}

		addList.forEach((item)=>{
			item.courseName = item.courseObj.name
			item.courseId = item.courseObj.id
			item.coursePriceId = item.priceObj.id
			item.coursePrice = item.priceObj.price
			item.courseDay = item.priceObj.dayAmount
		})

		let studentList = data.studentList
		studentList.push(...addList)
	}

	function ajaxSubmitOrder() {
		let itemList = []
		let studentList = data.studentList
		if(!studentList || studentList.length == 0) {
      uni.showToast({ title: '请添加学员', duration: 1200, icon: "none" })
			return
		}

		let reqArray = []
		studentList.forEach((item)=>{
			let obj = {name:item.name, idCard: item.idCard, courseId: item.courseId, coursePriceId: item.coursePriceId}
			reqArray.push(obj)
		})
		let reqData = {itemList: reqArray}
		submitOrder(reqData, submitFailHandle).then((res) => {
			let orderId = res.data.id
			goPay(orderId)
		})
	}

	function submitFailHandle(res) {
		let message = res.msg
		data.tipMessage = message
		showMessage.value = true
	}

	function removeStudent(index){
		data.studentList.splice(index, 1)
	}

	function goPay(orderId){
		pageRoute.routeRedirect('pages/order/buy/pay', {id: orderId})
	}

</script>

<style lang="scss" scoped>
	.comfig-button {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 30px;
	}
	
	.scroll-Y {
		height: calc(100vh - 74px - 180px);
	}
</style>
